<template>
   <view>
      <scroll-view class="content" scroll-y @scroll="onScroll">
         <view class="content_scroll">
            <view class="navbar" :class="sticky" :style="{backgroundColor: bgColor}">
               <view class="placeholder"></view>
               <view class="navbar_content">
                  <view class="left_icon" @click="goBack()">
                     <text class="icon-arrow-left"></text>
                  </view>
                  <view class="title">
                     <view class="title_content"  v-if="sticky" :class="followed ? 'followed' : 'none_followed'">
                        <u-avatar :src="fileUrl + data.avatar" mode="scaleToFill" :size="20"></u-avatar>
                        <view v-if="followed" class="text">私信</view>
                        <view v-else class="text">
                           <text class="icon-attention"></text>
                           <text>关注</text>
                        </view>
                     </view>
                  </view>
                  <view class="right_icon">
                     <text class="icon-report-circle" @click="show = true"></text>
                  </view>
               </view>
            </view>
            <view class="top">
               <view class="user">
                  <view class="avatar">
                     <u-avatar :size="84"
                        :src="fileUrl + data.avatar"
                        mode="scaleToFill"
                     />
                  </view>
                  <view class="controls followed" v-if="followed">
                     <view class="attention" @click="handleAddFans()">已关注</view>
                     <view class="icon-community white" @click="goChat()"></view>
                  </view>
                  <view class="controls" v-else>
                     <view class="attention" @click="handleAddFans()">关注</view>
                  </view>
               </view>
               <view class="user_info">
                  <view class="user_name">{{ data.nickname }}</view>
                  <view class="user_ip">
                     <text>IP所在地：{{ city }}</text>
                  </view>
               </view>
               <view class="property">
                  <view class="panel">
                     <view class="value">{{ data.attention }}</view>
                     <view class="name">关注</view>
                  </view>
                  <view class="panel">
                     <view class="value">{{ data.fans }}</view>
                     <view class="name">粉丝</view>
                  </view>
                  <view class="panel">
                     <view class="value">{{ data.forum }}</view>
                     <view class="name">发帖</view>
                  </view>
                  <view class="panel">
                     <view class="value">{{ data.likes }}</view>
                     <view class="name">被赞</view>
                  </view>
               </view>
            </view>
            <u-gap height="15px" bgColor="#f5f5f5"></u-gap>
            <view class="tabs">
               <u-sticky bg-color="#ffffff" :offset-top="0">
                  <view class="tabs_header">Ta的动态</view>
               </u-sticky>
               <view v-if="dataList.length != 0" style="height: auto;background-color: #f5f5f5;">
                  <view class="item" v-for="(item, index) in dataList" :key="index">
                     <view class="album">
                        <view class="album__content">
                           <view class="album__content_text" @click="goDetail(item)">
                              <u-parse :content="item.content" :style="{ height: item.toggle || item.row < 5 ? 'auto' : '110px', overflow: 'hidden' }"></u-parse>
                              <view class="toggleBtn" v-if="item.row > 5" @click.self.stop="open(item)">{{ item.toggle ? '收起' : '展开' }}</view>
                           </view>
                           <c-album-list :urls="item.images" :multipleSize="multipleSize" :space="10"></c-album-list>
                        </view>
                        <u-gap height="5" bgColor="#f5f5f5"></u-gap>
                        <view class="album__footer">
                           <view>
                              <image src="/static/tab2/icon_views.png"></image>
                              <text>{{ item.views }}</text>
                           </view>
                           <view>
                              <image src="/static/tab2/icon_comments.png"></image>
                              <text>{{ item.comments }}</text>
                           </view>
                           <view>
                              <image src="/static/tab2/icon_likes.png"></image>
                              <text>{{ item.likes }}</text>
                           </view>
                        </view>
                     </view>
                  </view>
                  <u-loadmore :status="loadMore" :margin-top="10" :marginBottom="20" />
               </view>
               <u-empty v-else icon="/static/no_data.png" text="暂无内容" style="height: calc(100% - 44px);"></u-empty>
            </view>
         </view>
      </scroll-view>

      <c-modal :show="show" title="系统提示" content="是否举报此用户？" showCancel cancelText="点错了" confirmText="举报"
      @cancel="show = false" @confirm="report()"></c-modal>

      <c-loading></c-loading>
   </view>
</template>

<script>
import {
   baseData,
   checkFans,
   updateFans
} from '@/api/user'
import {
   getForumList
} from '@/api/forum'
import mixin from '@/mixin'
export default {
   data() {
      return {
         uid: '',
         show: false,
         data: {},
         multipleSize: 70,
         isApp: false,
         city: '南昌市',
         sticky: '',
         bgColor: 'transparent',
         followed: false
      }
   },
   mixins: [mixin],
   created() {
      // #ifdef H5
      this.isApp = false
      uni.request({
         url: `https://restapi.amap.com/v3/ip?key=9a6012990ac5a512d7a40dd9be1e0237`,
         method: 'GET',
         success: ({ data, statusCode, header }) => {
            this.city = data.city
         }
      })
      // #endif
      // #ifndef H5
      this.isApp = true
      uni.getLocation({
         type: 'wgs84',
         geocode: true,
         isHighAccuracy: true,
         success: ({ longitude, latitude, address }) => {
            this.city = address.city
         }
      })
      // #endif
      checkFans({ uid: this.uid, id: this.$store.getters.id }).then(res => {
         if(res.code === 200) {
            this.followed = res.data
         }
      })
   },
   mounted() {
      const dom = uni.createSelectorQuery().select('.tabs')
      dom.boundingClientRect(info => {
         this.top = info.top
      }).exec()
   },
   methods: {
      onScroll(e) {
         const { scrollTop } = e.detail
         if(this.top - scrollTop < 15) {
            this.bgColor = 'rgba(255, 255, 255, 1)'
            this.sticky = 'sticky'
         }else if(this.top - scrollTop < 60) {
            this.bgColor = 'rgba(255, 255, 255, .85)'
         }else if(this.top - scrollTop < 100) {
            this.bgColor = 'rgba(255, 255, 255, .7)'
         }else if(this.top - scrollTop < 200) {
            this.bgColor = 'rgba(255, 255, 255, .5)'
         }else {
            this.sticky = ''
            this.bgColor = 'transparent'
         }
      },
      goBack() {
         uni.navigateBack()
      },
      report() {
         this.show = false
         uni.navigateTo({
            url: `/pages/report/index?uid=${this.uid}`
         })
      },
      getBaseData() {
         baseData(this.uid).then(res => {
            if(res.code === 200) {
               this.data = res.data
            }
         })
      },
      getDataList(isRefresh) {
         const params = {}
         params.size = 20
			params.current = this.current
			params.siftStatus = '2'
			params.uid = this.uid
         getForumList(params).then(res => {
            if(res.code === 200) {
					this.total = res.data.total
					if(isRefresh) {
						this.dataList = []
					}
					res.data.list.forEach(item => {
						const images = []
						let index = item.content.indexOf('</p>')
						item.row = 0
						while(index != -1) {
							index = item.content.indexOf('</p>', index + 1)
							item.row++
						}
						JSON.parse(item.images).map(img => {
							images.push(this.fileUrl + img)
						})
						item.images = images
						this.dataList.push(item)
					})
				}
         })
         this.getBaseData()
      },
      handleAddFans() {
         const params = {}
         params.uid = this.uid
         params.id = this.$store.getters.id
         updateFans(params).then(res => {
            if(res.code === 200) {
               this.followed = !this.followed
               let fans = this.data.fans
               this.$set(this.data, 'fans', this.followed ?  fans + 1 : fans - 1)
               if(this.followed) {
                  const msg = {}
                  msg.type = '0'
                  msg.target = this.uid
                  this.$root.socket.send({
                     data: JSON.stringify(msg)
                  })
               }
            }
         })
      },
      goChat() {
         uni.navigateTo({
            url: `/pages/tab3/chat/index?uid=${this.uid}&name=${this.data.nickname}`
         })
      },
      goDetail(item) {
         uni.navigateTo({
            url: `/pages/tab2/detail/index?id=${item.id}`
         })
      }
   },
   onLoad(params) {
      this.uid = params.uid
      this.getDataList(true)
   },
   updated() {
		const dom = uni.createSelectorQuery().in(this).select('.content')
		dom.boundingClientRect((info) => {
			this.multipleSize = (info.width - 60) / 3
		}).exec()
	},
}
</script>

<style lang="scss" scoped>

::v-deep .zp-paging-container-content {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.content {
   display: flex;
   flex-direction: column;
   height: 100vh;
   background-image: url('/static/tab2/bg.png');
   background-size: 100% 100%;

   .navbar {
      position: sticky;
      top: 0;
      width: 100vw;
      padding: 0 10px;
      box-sizing: border-box;
      z-index: 9999;

      &.sticky {

         .left_icon, .right_icon {
            background-color: transparent;
            
            [class^=icon] {
               color: #333333;
               font-weight: bold;
            }
         }
      }

      .placeholder {
         width: 100vw;
         height: var(--status-bar-height);
      }

      &_content {
         display: flex;
         align-items: center;
         height: 44px;
      }

      .left_icon, .right_icon {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 32px;
         height: 32px;
         background-color: rgba($color: #000000, $alpha: .2);
         border-radius: 50%;

         [class^=icon] {
            color: #ffffff;
            font-size: 20px;
         }
      }

      .title {
         flex: 1;

         &_content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 84px;
            margin: 0 10px;
            padding: 4px 6px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 14px;
            color: $primary-theme-color;
            border-radius: 20px;

            &.followed {
               width: 74px;
               background-color: #f1f1f1;
               color: #333333;
               font-weight: bold;

               .text {
                  margin-left: 10px;
               }
            }

            &.none_followed {
               width: 84px;
               background-color: rgba($color: $primary-theme-color, $alpha: .2);
            }
         }

         [class^=icon] {
            font-size: 16px;
            font-weight: bold;
            padding: 0 2px 0 5px;
         }

         text {
            line-height: 18px;
         }
      }
   }

   .top {
      margin-top: 200px;
      background-color: #ffffff;
   }

   .user {
      display: flex;
      align-items: center;
      padding: 0 15px;

      .avatar {
         width: 84px;
         height: 84px;
         transform: translateY(-24px);

         image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
         }
      }

      .controls {
         flex: 1;
         display: flex;
         justify-content: flex-end;
         padding-bottom: 20px;
         font-size: 14px;
      }

      .followed {

         .attention {
            background-color: #f1f1f1;
            color: #333333;
            font-weight: bold;
         }
      }

      .attention {
         padding: 3px 10px;
         background-color: #3D444D;
         border-radius: 20px;
         margin-right: 10px;
         color: #ffffff;
         font-size: 14px;
      }

      .white {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 28px;
         height: 28px;
         background-color: #3D444D;
         border-radius: 50%;
      }

      &_info {
         padding: 0 15px;
         font-size: 22px;
         font-weight: bold;
      }

      &_name {
         width: 100%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
      }

      &_ip {
         display: inline-block;
         margin-top: 10px;
         padding: 0 6px;
         border-radius: 4px;
         background-color: #cecece;
         color: #ffffff;
         font-size: 12px;
         font-weight: normal;
      }
   }

   .property {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 15px 0;
      border-radius: 8px;

      .panel {
         width: 100%;
         text-align: center;
      }

      & > * {
         color: #000000;
         font-weight: 600;
      }

      .value {
         font-size: 18px;
         line-height: 24px;
      }

      .name {
         padding-top: 5px;
         color: #999999;
         font-size: 12px;
         font-weight: normal;
      }
   }
}

.tabs {
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--status-bar-height) - 44px - 419px - 15px);
   background-color: #ffffff;

   &_header {
      padding: 10px 0 10px 10px;
      font-weight: bold;
      font-size: 16px;
      box-shadow: 0 1px 2px rgba($color: #000000, $alpha: .3);
   }

   & .item:first-child {
      padding-top: 0;
   }
}

</style>
